<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>知识问答</title>
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css">
		<link rel="stylesheet" href="css/toolbox.css">
		<style>
			.van-tabs__line {
				background: #005BAC;
			}

			.van-tabs__content {
				height: 100%;
			}

			.van-empty {
				margin-top: 50px;
			}

			.van-empty__description {
				margin-top: -80px;
			}

			.sp_item {
				margin: 0px 12px;
				padding: 10px 0;
				border-bottom: 1px solid #efefef;
			}

			.sp_item_left {
				width: 35%;
				height: 90px;
				display: flex;
				align-items: center;
				border-radius: 5px;
				overflow: hidden;
			}

			.sp_item_left img {
				width: 100%;
				margin: 0 auto;
			}

			.sp_item_right {
				width: 62%;
				margin-left: 3%;
			}

			.contentscroll {
				overflow: scroll;
			}

			.line1 {
				display: -webkit-box;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		</style>
	</head>
	<body style="background-color: white;">
		<div id="app" v-cloak class="margin">
			<van-tabs v-model:active="active" @click-tab="onClick">
				<van-tab v-for="(item1,index) in tab" :key="index" :title="item1.categoryName">
					<div class="contentscroll" :style="{height: contentHeight}">
						<van-list v-if="nothing==1" v-model="loading" offset='300' :finished="finished"
							finished-text="没有更多了" :immediate-check="false" @load="onLoad">
							<div class="flex kqaitem" v-for="item in detail" @click='linkToDetail(item.dataId)'>
								<img src="./img/ask_sm.png" alt="">
								<p>{{item.faqQuestion}}</p>
							</div>
						</van-list>
					</div>
					<van-empty v-if="nothing==2" class="custom-image" image="../doctor/img/blank_pic.png"
						description="— 未搜索到相关内容 —" />
				</van-tab>
			</van-tabs>

			
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<script src="../common/js/axios.min.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl
		} from '../common/js/api/vue3-axios-utils.js'


		const PatientData = {
			data() {
				return {
					url: {
						qaCategory: '/article/faq/category',
						List: '/article/faq/list',
					},
					tab:[],
					page: 1,
					pageSize: 20,
					total_page: 0,
					nothing: 1,
					finished: false,
					loading: false,
					id: 0,
					active: 0,
					detail: [],
				};
			},
			watch: {},
			created() {
				this.getCategory()
			},
			mounted() {
				this.contentHeight = document.documentElement.clientHeight - 44 + 'px'
				// this.getList()
			},
			methods: {
				getCategory() {
					getAction(spliceUrl(this.url.qaCategory)).then(res => {
						res = res.data
						console.log('qaCategory', res, res.result[0].dataId)
						if (res.success) {
							this.tab = res.result
							this.id = res.result[0].dataId
							this.getList()
						}
					})
				},
				getList() {
					postAction(spliceUrl(this.url.List), {
						faqCategoryId: this.id,
						pageNum: this.page,
						pageSize: this.pageSize
					}).then(res => {
						res = res.data
						if (res.success) {
							if (res.result.records.length > 0) {
								this.nothing = 1
								this.detail = this.detail.concat(res.result.records)
								this.total_page = res.result.pages
								this.loading = false
							} else {
								if (this.page == 1) {
									this.nothing = 2
									this.detail = []
								} else {}
							}
						} else {
							console.log(res.message)
						}
					})

				},

				onClick(index) {
					console.log('onClick-index', index)
					this.detail = []
					this.active = index.name
					this.page = 1
					this.id = this.tab[index.name].dataId
					this.loading = false
					this.finished = false
					this.getList()
				},
				onLoad() {
					if (this.page < this.total_page) {
						this.page++
						this.getList()
					} else {
						this.loading = false
						this.finished = true
					}
				},
				linkToDetail(id) {
					window.location.href = 'knowledgeQADetail.html?id=' + id
				},
			},

		};

		const app = Vue.createApp(PatientData);

		app.use(vant);
		app.use(vant.Lazyload);

		app.mount("#app");
	</script>
</html>
